<template>
  <div v-loading="loading" class="w-full h-full flex py20px justify-center overflow-y-auto">
    <el-form ref="formRef" style="max-width: 640px" :model="form" :rules="rules" label-width="auto" status-icon>
      <template v-for="item in fromList">
        <el-form-item :label="item.label" :prop="item.prop">
          <template v-if="item.type==='options'">
            <template v-for="(opt,i) in form[item.prop]">
              <div class="flex justify-between w-full mb5px">
                <el-input v-model="opt.value" style="max-width: 220px" placeholder="0.00">
                  <template #prepend>{{$t('form.21')}}</template>
                </el-input>
                <el-input v-model="opt.rate" style="max-width: 220px" placeholder="%">
                  <template #prepend>{{$t('form.22')}}</template>
                </el-input>
                <el-button type="danger" :icon="Delete" circle @click="delOptions(i)" />
              </div>
            </template>
          </template>
          <template v-else>
            <div class="flex flex-col gap10px">
              <el-input v-model="form[item.prop]" />
              <el-text class="leading-tight" line-clamp="10">{{item.hint}}</el-text>
            </div>
          </template>
        </el-form-item>


      </template>
      <el-form-item label=" ">
        <el-button type="primary" @click="submitForm()">
          {{$t('btn.1')}}
        </el-button>
        <el-button type="primary" @click="addOptions">
          {{$t('btn.2')}}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { Delete } from '@element-plus/icons-vue'
import Api from '@/api/setting/topup'
import { onMounted } from 'vue'
const { t } = useI18n();
const loading = ref(false)
const getInfo = () => {
  loading.value = true
  Api.get().then(s => {
    form.value = s.data
  }).finally(e => {
    loading.value = false
  })
}
const fromList = [
  { label: t("form.23"), prop: "gift_rate_first_time", hint: t("hint.38") },
  { label: t("form.24"), prop: "gift_rate", hint: t("hint.39") },
  { label: t("form.57"), prop: "min_amount", hint: t("hint.84") },
  { label: t("form.25"), prop: "options", type: "options" },
]
const rules = {
  gift_rate_first_time: [{ required: true, message: t('hint.40'), trigger: 'blur' }],
  gift_rate: [{ required: true, message: t('hint.41'), trigger: 'blur' }],
}
const form = ref({
  gift_rate_first_time: '',
  gift_rate: '',
  min_amount: '',
  options: [],
})
const formRef = ref()
const submitForm = () => {
  formRef.value.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      Api.put(form.value).then(s => {
        ElMessage.success(t('hint.29'))
      }).finally(() => {
        loading.value = false
      })
    }
  })
}
const addOptions = () => {
  form.value.options.push({
    rate: "",
    value: ""
  })
}
const delOptions = (i) => {
  form.value.options.splice(i, 1)
}
onMounted(() => {
  getInfo()
})
</script>
